import React     from "react";
import ReactDOM  from "react-dom";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom'

// 页面
// 下面这种方式写路径局限了 index.jsx 和 app.jsx 位置，如果存放位置改变，那么这个路径也要改；
// import Home from './home/index.jsx';
// 解决方案：可以在 webpack.config.js 文件中进行路径配置，如下所示
import Layout         from 'component/layout/index.jsx';
import Home           from 'page/home/index.jsx';
import ProductRouter  from 'page/product/router.jsx';
import Login          from 'page/login/index.jsx';
import OrderList      from 'page/order/index.jsx';
import OrderDetail    from 'page/order/detail.jsx';
import UserList       from 'page/user/index.jsx';
import ErrorPage      from 'page/error/index.jsx';

// <Redirect from="*" to="/" /> 表示：如果所有的都匹配 / 的话，那么所有的组件都重定向到 `/`
class App extends React.Component{
  render(){
    let LayoutRouter = (
      <Layout>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/product' component={ProductRouter} />
          <Route path='/product-category' component={ProductRouter} />
          <Route path='/order/index' component={OrderList} />
          <Route path='/order/detail/:orderNumber' component={OrderDetail} />
          <Route path='/user/index' component={UserList} />
          <Redirect exact from='/order' to="/order/index" />
          <Redirect exact from='/user' to="/user/index" />
          <Route component={ErrorPage} />
        </Switch>
      </Layout>
    );

    return (
      <Router>
        <Switch>
          <Route path='/login' component={Login} />
          <Route path='/' render={ props => (
            LayoutRouter
          )} />
        </Switch>
      </Router>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);
